<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>蒙自公安大数据智能作战平台</title>
	<link rel="icon" href="assets/images/logo.png" type="image/x-icon">
	<link rel="stylesheet" href="assets/icons/style.css">
	<link rel="stylesheet" href="assets/css/selfStyle.css">
	<script src="scripts/plugins/jquery-1.11.3.min.js"></script>
	<script src="scripts/plugins/jquery.com.toolkit.js"></script>
	<script src="scripts/plugins/jquery.tmpl.min.js"></script>
	<script src="scripts/app/appController.js"></script>
	<script src="scripts/app/appApi.js"></script>
	<script src="scripts/app/appData.js"></script>
	<script src="scripts/app/index.js"></script>
</head>
<style type="text/css">
	html,body{height:100%;overflow: hidden;padding:0;margin:0;}
	body { border: none; margin: 0; background:url(./assets/images/bg.jpg) no-repeat center 5%;background-size:cover;  text-align:center; }
	li {
		list-style: none;
	}
	ul {
		margin: 0;
		padding: 0;
	}
	.main{	width:1240px;height:400px;

		position: absolute;
		left:50%;
		z-index: 99;
		margin-left:-620px ;
	}
	.login-logo{margin:3% auto 2% auto;width:35%;max-width:815px;}
	.login-logo img{width:100%}
	.contentbox {
		clear:left;
	}
	.qcontainer {
		-webkit-perspective: 400;
		-moz-perspective: 400;
		display:inline-block;
		width: 220px;
		margin-right:20px;
		position: relative;
	}
	.film {
		display:block;
		width: 100%;
		height: 300px;
		-webkit-transform-style: preserve-3d;
		-webkit-transition: 1.5s;
		-moz-transform-style: preserve-3d;
		-moz-transition: 1.5s;
		overflow: hidden;
		box-shadow: 0 0 10px #333;
	}
	.qcontainer:hover .film {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
	}
	.face {
		position: absolute;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		overflow: hidden;
		border-radius: 8px;
		background-color:#fff;
		border-bottom:4px solid #c30;
	}
	.qcontainer:hover .film .back{   }
	.back {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		background: -webkit-gradient(linear, left top, left bottom, from(#fdbb5a), to(#db5726));
		background: -moz-linear-gradient(top, #fdbb5a, #db5726);
		width:100%;
		height:320px;
	}
	.foot{
		text-align: center;
		color: #fff;
		position: fixed;
		bottom: 20px;
		left: 50%;
		margin-left:-126px;
		font-size: 12px;
		font-family: "微软雅黑"；

	}
	h1{color:#243591;padding:20px;}
	.submenu{padding:20px; text-align:left;}
	.submenu a{color:#fff;padding:5px;margin:5px;display:block; text-decoration: none;border-radius: 4px;}
	.submenu a i{font-size:20px;display: inline-block;margin-right: 5px;}
	.submenu a:hover{background-color:rgba(0,0,0,.2);}

	.login{position:absolute;left:0;top:0;height:100%;width:100%;z-index:9999;background-color:rgba(0,0,0,.5);}
	.login i{position:relative;font-size:24px;color:#999;margin-right:-30px; z-index: 9; vertical-align: middle;display:inline-block;}
	.login-form{background-color:rgba(255,255,255,9);width:600px;height:400px;padding:20px;margin:150px auto auto;border-radius: 8px;color:#243591;}
	.form-item{padding:10px ;width:450px;text-align: left;margin:auto;}
	.input{width:400px;height:30px; padding:5px 10px 5px 36px; border-radius: 4px;border:1px solid #ddd;font-size:16px;vertical-align: middle;display:inline-block;}
	.input:hover{border-color:#aaa;}
	.input:focus{border-color:#243591;color:#243591;}
	.btn{width:450px;border:none;display:block;height:45px;margin:auto;background-color:#243591;border-radius: 4px;color:#fff;}
	.yzm{display:inline-block;vertical-align:middle;margin-left:10px;border-radius: 4px;cursor: pointer;}
	.form-msg{color:#e60412;}
	.form-msg i{margin-right:5px;color:#e60412;}

	.rotate{animation: 3s linear 0s normal none infinite running rotate;z-index: 4;}
	.footer-photo.right .rotate{animation: 3s linear 0s normal none infinite running rotate2;}
	.footer-photo{ position:fixed; left:26%;bottom:2%;z-index: 9}
	.footer-photo.right{left:auto;right:12%;bottom:5%;}
	.footer-photo.center{left:auto;right:46%;bottom:10%;}
	.rotate{ position: absolute;top:-20px;left:-20px; z-index: 10}
	/*		.photo{position: absolute;left:0;top:0;width:160px;height:160px; z-index: 111}*/
	.rotate img{width:200px;display: block;}
	.photo img{width:160px;display:block;}
	.photo:hover img{animation: 3s linear 0s normal none infinite running rotate2}
	.flag{position: fixed;left:0;top:0;width:35%;max-width:700px;}
	.ribbon{position: fixed;right:0;bottom:0;width:45%;max-width:1000px;}
	.flag img,.ribbon img{width:100%;display:block;}

	@keyframes rotate{

		0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg)}
		50%{-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg)}
		100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg)}

	}

	@keyframes rotate2{
		0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg)}
		50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
		100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg)}

	}


	@media only screen and (max-width: 1440px){

		.qcontainer,.back {width: 180px;height:auto;}
		.qcontainer img,.back img {max-width:100%;}
		.film{height:auto;}
		.submenu{padding:10px;}

		.rotate img{width:140px;display: block;}
		.photo img{width:100px;}
	}
	.loginoutimg{ position:absolute; border:none; right:20px; top:20px; z-index:100; width:105px; height:27px; background:url(./assets/images/loginoutimg.png) no-repeat center top; transition: all 0.5s ease 0s; }
	.loginoutimg:hover{ background-position: center bottom; }
	</style>
	<body>
	<div class="login-logo"><img src="./assets/images/login-logo.png"></div>
	<button class="logout-btn loginoutimg"></button>
		<div class="main">
			<h1 style="display:none">蒙自公安大数据智能作战平台</h1>

			<div class="contentbox">
				<!--<h1>蒙自公安智能作战大数据分析平台</h1>-->

				<div class="qcontainer">
					<a  style="overflow:visible;" class="film" href="http://10.169.52.249:8080/access/index.html" target="_blank">
						<div class="face front">
							<img src="./assets/images/app1.jpg">
						</div>
						<div class="face back"><img src="./assets/images/app1.jpg"></div>
					</a>
				</div>

				<div class="qcontainer">
					<a  style="overflow:visible;" class="film" href="www.baidu.com" target="_blank">
						<div class="face front">
							<img src="./assets/images/app6.jpg">
						</div>
						<div class="face back"><img src="./assets/images/app6.jpg"></div>
					</a>
				</div>

				<div class="qcontainer">
					<a  style="overflow:visible;" class="film" href="http://10.169.52.248:8080/analysisWeb/index.html" target="_blank">
						<div class="face front">
							<img src="./assets/images/app3.jpg">
						</div>
						<div class="face back"><img src="./assets/images/app3.jpg"></div>
					</a>
				</div>

				<div class="qcontainer">
					<a  style="overflow:visible;" class="film" href="http://10.169.52.248:8080/exchange/?menuId=1" target="_blank">
						<div class="face front">
							<img src="./assets/images/app2.jpg">
						</div>
						<div class="face back"><img src="./assets/images/app2.jpg"></div>
					</a>
				</div>

				<div class="qcontainer">
					<a  style="overflow:visible;" class="film" href="http://172.17.225.115:8080/auth/index.html" target="_blank">
						<div class="face front">
							<img src="./assets/images/app7.jpg">
						</div>
						<div class="face back"><img src="./assets/images/app7.jpg"></div>
					</a>
				</div>

				<!--<div class="qcontainer" id="pt">-->
					<!--<div class="film"  style="overflow:visible;">-->
						<!--<div class="face front">-->
							<!--<img src="./assets/images/app7.jpg">-->
						<!--</div>-->
						<!--<div class="face back">-->
							<!--<h3>大数据平台</h3>-->
							<!--<ul class="submenu">-->
								<!--<li><a target="_blank" href="http://110.185.210.151:8012/site/cms/news.html"><i class="icon-devices"></i>门户网站管理</a></li>-->
								<!--<li><a target="_blank" href="http://10.169.52.248:8080/auth"><i class="icon-admin"></i>用户权限管理</a></li>-->
								<!--<li><a target="_blank" href="http://110.185.210.151:8011/"><i class="icon-db-trans"></i>hadoop 集群管理</a></li>-->
								<!--<li><a target="_blank" href="http://110.185.210.151:8013/_plugin/rtf/"><i class="icon-pageview"></i>搜索引擎管理</a></li>-->
							<!--</ul>-->
						<!--</div>-->
					<!--</div>-->
				<!--</div>-->

			</div>
		</div>
		<canvas id="c"></canvas>
		<svg xlmns="http://www.w3.org/2000/svg" version="1.1">
			<defs>
				<filter id="turbulence">
					<feTurbulence type="fractalNoise" baseFrequency="0.05 0.05" numOctaves="1" result="noice"></feTurbulence>
					<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="20" in="SourceGraphic"></feDisplacementMap>
				</filter>
			</defs>
		</svg>
	<div class="flag">
		<img src="./assets/images/index-flag.png">
	</div>
	<div class="ribbon">
		<img src="./assets/images/index-ribbon.png">
	</div>
		<div class="footer-photo">
			<div class="rotate"><img src="./assets/images/index-circle.png"></div>
			<div class="photo"><img src="./assets/images/index-photo1.png"></div>
		</div>
	<div class="footer-photo center">
		<div class="rotate"><img src="./assets/images/index-circle.png"></div>
		<div class="photo"><img src="./assets/images/index-photo2.png"></div>
	</div>
		<div class="footer-photo right">
			<div class="rotate"><img src="./assets/images/index-circle.png"></div>
			<div class="photo"><img src="./assets/images/index-photo3.png"></div>
		</div>
		<script>
			var c = document.getElementById('c'),
			ctx = c.getContext('2d'),
			points = [],
			count = 40,
			size = 3,
			delta = 4,
			distance = 170;
			window.requestAnimFrame = (function() {
				return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
				function(callback) {
					window.setTimeout(callback, 1000 / 60)
				}
			})();

			function checkDistance(x1, y1, x2, y2) {
				return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2))
			}
			function setColor() {
				return 'rgb(' + Math.round(255 * Math.random()) + ',' + Math.round(255 * Math.random()) + ',' + Math.round(255 * Math.random()) + ')'
			}
			function Point(x, y, dx, dy, color) {
				this.x = x;
				this.y = y;
				this.dx = dx;
				this.dy = dy;
				this.color = color
			}
			function initPoint(x, y) {
				var x = x || c.width * Math.random(),
				y = y || c.height * Math.random(),
				dx = -delta / 2 + delta * Math.random(),
				dy = -delta / 2 + delta * Math.random(),
				color = setColor();
				points.push(new Point(x, y, dx, dy, color))
			}
			function drawPoint(point) {
				ctx.fillStyle = point.color;
				ctx.beginPath();
				ctx.arc(point.x, point.y, size, 0, 2 * Math.PI);
				ctx.fill()
			}
			function drawLines(point, index) {
				for (var i = 0; i < index; i++) {
					var opacity = 1 - checkDistance(point.x, point.y, points[i].x, points[i].y) / distance;
					if (opacity > 0) {
						var grad = ctx.createLinearGradient(point.x, point.y, points[i].x, points[i].y);
						grad.addColorStop(0, point.color);
						grad.addColorStop(1, points[i].color);
						ctx.strokeStyle = grad;
						ctx.globalAlpha = opacity;
						ctx.beginPath();
						ctx.moveTo(point.x, point.y);
						ctx.lineTo(points[i].x, points[i].y);
						ctx.stroke();
						ctx.globalAlpha = 1
					}
				}
			}
			function updatePosition() {
				for (var i = 0; i < points.length; i++) {
					var xDx = points[i].x + points[i].dx,
					yDy = points[i].y + points[i].dy;
					if (xDx - size < 0 || xDx + size > c.width) {
						points[i].dx = -points[i].dx
					}
					if (yDy - size < 0 || yDy + size > c.height) {
						points[i].dy = -points[i].dy
					}
					points[i].x += points[i].dx;
					points[i].y += points[i].dy;
					drawPoint(points[i]);
					drawLines(points[i], i)
				}
			}
			function init() {
				points.length = 0;
				for (var i = 0; i < count; i++) {
					initPoint()
				}
			}
			function resize() {
				c["width"] = window["innerWidth"];
				c["height"] = window["innerHeight"];
				init()
			}
			function draw() {
				ctx.clearRect(0, 0, c.width, c.height);
				updatePosition();
				window.requestAnimFrame(draw)
			}
			window.addEventListener("resize", resize);
			c.addEventListener("mouseup", function(e) {
				initPoint(e.pageX - c.offsetLeft, e.pageY - c.offsetTop)
			});
			resize();
			draw();


			$(".btn").click(function() {
				$(".login").fadeOut();
				$(".main").fadeIn();
			});
		</script>
	</body>
	</html>


